import {defineComponent, ref, computed,} from "vue"
import {NModal, NButton, NCard, NIcon} from "naive-ui"
import {CloseOutlined, FullscreenOutlined} from "@vicons/antd"
import useEditModel from "@/hooks/editModel"
import Flexform, {flexformitem} from "@/components/flexform/index"

export default defineComponent({
    name: "editModel",
    props: {
        close: {
            type: Function,
            default: null,
        },
    },
    setup(props, {expose, emit}) {
        const {
            showModel,
            handleInit,
            handleClose,
            handleReset,
            formValue,
            formRef,
            title,
            editType,
            resultText,
            loading,
        } = useEditModel(null, null, "", props.close)
        expose({handleInit, handleClose, handleReset, formValue})
        // 自定义属性
        const formList = ref([
            {
                span: 24,
                label: "字典名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
            },
            {
                span: 24,
                label: "描述",
                key: "desc",
                default: "",
                type: "textarea",
                placeholder: "请输入描述",
            },
        ])
        const actionSlot = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        const defaultSlot = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={{padding: 0, width: "600px",}}>
                <Flexform formValue={formValue.value} formList={formList.value}/>
            </NCard>
        </div>)
        const iconSlot = () => (<div class="w-50px h-20px flex justify-between items-center">
            <NIcon size={20}>
                <CloseOutlined/>
            </NIcon>
            <NIcon size={20}>
                <FullscreenOutlined/>
            </NIcon>
        </div>)
        return () => (
            <div v-myfocus={{value: true}}><NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val}
                                                   preset={"dialog"} title={title.value} showIcon={false}
                                                   loading={loading.value}
                                                   v-slots={{action: actionSlot, default: defaultSlot, icon: iconSlot}}>
            </NModal></div>)
    },
})
